<template>
    <a-spin :spinning="loading" size="large">
        <div class="home-title">
            <h1>隐患报送</h1>
            <h3>1.问题地址：</h3>
            <van-cell-group>
              <van-field v-model="placeName" placeholder="请输入问题地址"></van-field>
            </van-cell-group>
            <h3>2.问题描述：</h3>
            <van-cell-group>
              <van-field type="textarea" v-model="content" placeholder="请输入问题描述"></van-field>
            </van-cell-group>
            <h3>3.图片上传</h3>
            <van-cell-group>
            <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            :before-read="beforeRead"
            :preview-options='{closeable:true}'></van-uploader>
            </van-cell-group>
        </div>
        <div class="btn">
            <van-button type="primary" @click="doAddFace">报送</van-button>
        </div>
        <div class="car-list">
          <h3>{{ toastText }}</h3>
        </div>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" name="list" to="/photo">隐患列表</van-tabbar-item>
            <van-tabbar-item icon="plus" name="add" to="/photoAdd">隐患报送</van-tabbar-item>
        </van-tabbar>
    </a-spin>
  </template>
  
  <script setup>
  import { ref, onMounted, inject } from "vue"
  import { useRoute } from "vue-router";
  import { RadioGroup as VanRadioGroup, Dialog as showDialog, Popup as VanPopup, CellGroup as VanCellGroup, Uploader as VanUploader, Field as VanField } from "vant";
  import router from "@/route/index.js";
  import { submitHiddentrouble, photoUploadBase64 } from "@/api/common.js";
  import moment from "moment"
  import * as imageConversion from 'image-conversion'
  
  const loading = ref(false),
    toast = inject("toast"),
    route = useRoute();
  const show = ref(false);
  const fileList = ref([]);
  const placeName = ref("");
  const content = ref("");
  const active = ref('add');
  const toastText = ref("");
  const userInfo = ref(JSON.parse(localStorage.getItem("SAVE_USER_INFO")))
  
  onMounted(() => {
    getList()
  })
  
  function getList() {}

  function doAddFace() {
    if(!placeName.value) {
      toast.msg("请输入图片地址！")
      return
    }
    if(!fileList.value.length) {
      toast.msg("请上传图片！")
      return
    }
    let obj = {
      nickName: userInfo.value.realName || userInfo.value.nickName,
      userId: userInfo.value.userId,
      placeName: placeName.value,
      content: content.value,
      imgArray: []
    }
    fileList.value.forEach(item => {
      obj.imgArray.push(item.msg)
    })
    loading.value = true
    submitHiddentrouble(obj).then(res => {
      if(res) {
        toastText.value = `报送成功！报送地址：${placeName.value}！报送问题：${content.value}！`
        toast.msg("报送成功")
        loading.value = false
        router.push("/photo")
      } else {
        toast.msg("报送失败")
        loading.value = false
      }
    }, err => {
      toast.error(err)
      loading.value = false
    })
  }

  function beforeRead(file) {
    return new Promise((resolve, reject) => {
      imageConversion.compressAccurately(file, 200).then(res => {
        res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
        console.log('压缩后', res)
        resolve(res)
      })
    });
  }

  function afterRead(file) {
    uploadFile(file);
  }
  function uploadFile(file) {
    file.status = "uploading";
    loading.value = true;
    apiUpLoadImg(file);
  }

  function getBase64(file) {
    return new Promise(function (resolve, reject) {
      const reader = new FileReader();
      let imgResult = "";
      reader.readAsDataURL(file);
      reader.onload = function () {
        imgResult = reader.result;
      };
      reader.onerror = function (error) {
        reject(error);
      };
      reader.onloadend = function () {
        resolve(imgResult);
      };
    });
  }

  function apiUpLoadImg(file) {
    getBase64(file.file).then(res => {
      let obj = {
        base64: res
      }
      //接口需要传的参数
      photoUploadBase64(obj).then(res => {
        file.status = "success";
        file.msg = res.message;
        loading.value = false;
      },err=>{
        loading.value = false
        console.log(err)
      })    
    })
  }
  </script>
  
  <style lang="less" scoped>
  :deep(.van-field__label) {
    width: 50vw;
  }
  :deep(.van-uploader) {
    margin: 8px 0 0 10px;
  }
  .btn {
    margin: 5px 3px;
  
    button {
      width: 100%;
    }
  
  }
  
  :deep(.van-uploader__preview) {
    margin-right: 5px;
  }
  
  .watch-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0 0 0;
    background-color: #fff;
    margin: 20px;
    border-radius: 20px;
    font-family: adobe;
    .btn {
      width: 150px;
      height: 150px;
      background: linear-gradient(to bottom, rgb(71, 160, 248), rgb(59, 135, 246));
      border-radius: 150px;
      font-family: abode;
      font-size: 20px;
      color: #fff;
      font-weight: 500;
      text-align: center;
      padding-top: 45px;
      margin: 10px auto;
      text-shadow: 0px 0px 1px #fff;
      .time {
        font-size: 16px;
        color: rgb(145, 200, 250);
      }
    }
    .watch-list {
      margin: 20px 30px;
      text-align: center;
      h3 {
        color: #252525;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
      }
      .list {
        line-height: 40px;
        color: #000000;
        font-size: 16px;
        padding: 0 15px;
        letter-spacing: 2px;
        white-space: nowrap;
      }
    }
  }

  .home-title {

    margin-left: 5px;
    margin-top: 10px;

    h1 {
      font-weight: 700;
      margin: 0;
    }

    h3 {
      font-weight: 700;
      margin: 0;
      margin-left: 3px;
    }

    span {
      display: block;
      margin-left: 15px;
      margin-bottom: 3px;

      font.yellow {
        border: 1px solid #ffea00;
        color: #ffea00;
        padding: 1px 3px;
      }

      font.orange {
        border: 1px solid orange;
        color: orange;
        padding: 1px 3px;
      }

      font.red {
        border: 1px solid red;
        color: red;
        padding: 1px 3px;
      }

    }

    }
  .car-list {
    margin: 20px 30px;
    padding-bottom: 30px;
    h3 {
      color: #252525;
      font-size: 20px;
      font-weight: bold;
    }
    .list {
      background: #ffffff;
      border-radius: 17px;
      margin: 5px;
      height: 50px;
      line-height: 50px;
      color: #000000;
      font-size: 16px;
      padding: 0 15px;
      letter-spacing: 1px;
      white-space: nowrap;
    }
  }
  @font-face {
    font-family: adobe;
    src: url(../../assets/fonts/苹方黑体-中黑-简.woff);
  }
  </style>